<template>
  <div id="MakeAbill">
    <div class="content">
      <div class="overflow-auto">
        <div class="body">
          <div class="top">
            <span>收入项</span>
            <el-button type="primary" @click="addAccount('收入')">新增收入项</el-button>
          </div>
          <!-- 收入项 -->
          <div class="income">
            <div class="arrays" v-for="(item, index) in income" :key="index">
              <!-- 存在的 -->
              <div v-if="item.isEdit == false" class="item">
                <div class="text">
                  {{ item.name }}
                </div>
                <div class="bt">
                  <el-button type="text" icon="el-icon-edit" @click="edit(item)">
                  </el-button>
                  <el-button type="text" icon="el-icon-delete" @click="del(item)">
                  </el-button>
                </div>
              </div>
              <!-- 新增 -->
              <div class="boxs" v-if="item.isEdit == true || item.name == ''">
                <div style="display:flex; line-height: 40px;">
                  <el-input class="text" size="mini" v-model="item.name">
                  </el-input>
                  <div class="bt">
                    <el-button type="text" style="color:#00e577" icon="el-icon-check" @click="addIncome(item, index)"
                      id="green-check"></el-button>
                    <el-button type="text" style="color:#ff555d" id="red-close" icon="el-icon-close"
                      @click="Close(item, '收入')"></el-button>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <!-- 支出项 -->
          <div class="top">
            <span>支出项</span>
            <el-button type="primary" @click="addAccount('支出')">新增支出项</el-button>
          </div>
          <div class="expenditure">
            <div class="arrays" v-for="(item, index) in expenditure" :key="index">
              <!-- 存在的 -->
              <div v-if="item.isEdit == false" class="item">
                <div class="text">
                  {{ item.name }}
                </div>
                <div class="bt">
                  <el-button type="text" icon="el-icon-edit" @click="edit(item)"></el-button>
                  <el-button type="text" icon="el-icon-delete" @click="del_expenditure(item)"></el-button>
                </div>
              </div>
              <!-- 新增 -->
              <div class="boxs" v-if="item.isEdit == true || item.name == ''">
                <div style="display:flex; line-height: 40px;">
                  <el-input class="text" size="mini" v-model="item.name">
                  </el-input>
                  <div class="bt">
                    <el-button type="text" style="color:#00e577" icon="el-icon-check" @click="addExpenditure(item)"
                      id="green-check"></el-button>
                    <el-button type="text" style="color:#ff555d" id="red-close" icon="el-icon-close"
                      @click="Close(item, '支出')"></el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { income, expenditure } from '@/api/PaymentMethodSetting'
export default {
  Name: 'MakeAbill',
  data() {
    return {
      hotel_id: sessionStorage.getItem('hotel_id'),
      income: [],
      expenditure: []
    }
  },
  methods: {
    // 新增收入/支出项按钮
    addAccount(name) {
      if (name == '收入') {  //新增收入项
        this.income.unshift({
          name: '',
          isEdit: true,
          isNew: true
        })
      } else if (name == '支出') {// 新增支出项
        this.expenditure.unshift({
          name: '',
          isEdit: true,
          isNew: true
        })
      }
    },
    // 修改
    edit(item) {
      item.isEdit = true
    },
    //关闭修改
    Close(item, arrName) {
      item.isEdit = false
      if (arrName == '收入') {
        this.ViewIncome('GET', this.hotel_id)
      } else if (arrName == '支出') {
        this.ViewExpenditure('GET', this.hotel_id)
      }
    },

    // 获取收入项数据
    async ViewIncome(method, hotel_id) {
      let data = {
        hotel_id: hotel_id,
        page_rows: 1000
      }
      await income(method, data).then(res => {
        console.log(res, '获取收入项结果');
        let { code, data } = res.data
        if (200 == code) {
          let arr = data.list
          arr.forEach(item => {
            item.isEdit = false
          })
          this.income = arr
        }
      })
    },
    // 获取支出项数据
    async ViewExpenditure(method, hotel_id) {
      let data = {
        hotel_id: hotel_id,
        page_rows: 1000
      }
      await expenditure(method, data).then(res => {
        console.log(res, '获取支出项结果');
        let { code, data } = res.data
        if (200 == code) {
          let arr = data.list
          arr.forEach(item => {
            item.isEdit = false
          })
          this.expenditure = arr
        }
      })
    },
    // 添加或者修改收入项
    async addIncome(item, index) {
      // 添加
      if (item.isNew == true) {
        let data = {
          hotel_id: this.hotel_id,
          name: item.name
        }
        await income('POST', data).then(res => {
          console.log(res, '添加或者修改收入项结果');
          let { code, message, data } = res.data
          if (200 == code) {
            item.isEdit = false
            item.isNew = false
            this.income[index].id = data.id
            this.$message.success(message);
            // this.ViewIncome('GET', this.hotel_id)
          } else {
            this.$message.error(message);
          }
        })
      } else {// 修改
        let data = {
          id: item.id,
          name: item.name
        }
        console.log(data, '修改收入项data');
        await income('PUT', data).then(res => {
          console.log(res, '修改收入项结果');
          let { code, message } = res.data
          if (200 == code) {
            this.$message.success(message);
            item.isEdit = false
          } else {
            this.$message.error(message);
            item.isEdit = false
          }
        })
      }

    },
    // 添加或者修改支出项
    async addExpenditure(item) {
      let data = {
        hotel_id: this.hotel_id,
        name: item.name
      }
      // 添加
      if (item.isNew == true) {
        await expenditure('POST', data).then(res => {
          console.log(res);
          if (res.data.message == "保存成功") {
            item.isEdit = false
            item.isNew = false
            this.income[index].id = data.id
            this.ViewExpenditure('GET', this.hotel_id)
            this.$message.success(res.data.message);
          } else {
            this.$message.error('系统有误');
          }
        })
        // 修改
      } else {
        let data = {
          id: item.id,
          name: item.name
        }
        await expenditure('PUT', data).then(res => {
          console.log(res);
          if (res.data.message == '保存成功') {
            this.$message.success('修改成功');
            item.isEdit = false

          }
        })
      }

    },
    // 删除收入项
    async del(item) {
      let data = {
        id: item.id
      }
      console.log(data, '删除收入项data');
      await income('DELETE', data).then(res => {
        console.log(res, '删除收入项res');
        let { code, message } = res.data
        if (code == 200) {
          this.$message.success(message);
          this.ViewIncome('GET', this.hotel_id)
        } else {
          this.$message.error(message);
        }
      })
    },
    // 删除支出项
    async del_expenditure(item) {
      let data = {
        id: item.id
      }
      console.log(data, '删除支出项data');
      await expenditure('DELETE', data).then(res => {
        console.log(res, '删除支出项res');
        let { code, message } = res.data
        if (code == 200) {
          this.$message.success(message);
          this.ViewExpenditure('GET', this.hotel_id)
        } else {
          this.$message.error(message);
        }
      })
    },
  },
  created() {
    this.ViewIncome('GET', this.hotel_id)
    this.ViewExpenditure('GET', this.hotel_id)
  }
}
</script>

<style lang="scss" scoped>
.content {
  .overflow-auto {
    width: calc(100% - 190px);
    height: calc(100% - 40px);
    padding: 20px;
    overflow: auto;

    .body {
      width: 100%;
      height: 100%;

      .top {
        width: 100%;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
      }

      .income {
        display: flex;
        flex-wrap: wrap;

        .arrays {
          margin-right: 20px;
          margin-bottom: 20px;
          margin-top: 20px;

          .item {
            border-radius: 5px;
            width: 136px;
            height: 41px;
            background-color: white;
            display: flex;
            justify-content: space-evenly;

            .bt {
              display: flex;
              line-height: 40px;
            }

            .text {
              line-height: 38px;
              font-size: 14px;
            }
          }

          .boxs {
            .text {
              font-size: 12px;
              line-height: 38px;
              margin-left: 10px;
              margin-right: 5px;
            }

            .bt {
              display: flex;
              line-height: 40px;
            }

            border-radius: 5px;
            width: 136px;
            height: 41px;
            display: flex;
            background-color: white;
            justify-content: space-between;
          }
        }
      }

      .expenditure {
        display: flex;
        flex-wrap: wrap;

        .arrays {
          margin-right: 20px;
          margin-bottom: 20px;
          margin-top: 20px;

          .item {
            border-radius: 5px;
            width: 136px;
            height: 41px;
            background-color: white;
            display: flex;
            justify-content: space-evenly;

            .bt {
              display: flex;
              line-height: 40px;
            }

            .text {
              line-height: 38px;
              font-size: 14px;
            }
          }

          .boxs {
            .text {
              font-size: 12px;
              line-height: 38px;
              margin-left: 10px;
              margin-right: 5px;
            }

            .bt {
              display: flex;
              line-height: 40px;
            }

            border-radius: 5px;
            width: 136px;
            height: 41px;
            display: flex;
            background-color: white;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>